<template>
	<view class="container">
		<view class="tui-order-header">
			<view class="tui-text">订单编号：
				<text class="tui-bold">YYSN{{orderId}}</text>
			</view>
			<view class="tui-text">快递公司：{{postInfo.express_name}}</view>
			<view class="tui-text">快递编号：{{postInfo.post_code}}</view>
		</view>
		<view class="tui-order-tracking">
			<tui-time-axis>

				<block v-for="(item,index) in expressData" :key="index">
					<tui-timeaxis-item bgcolor="none">
						<template v-slot:node>
							<view v-if="index == 0" class="tui-node tui-bg-primary">
								<tui-icon name="check" color="#fff" :size="14" :bold="true"></tui-icon>
							</view>
							<view v-if="index > 0" class="tui-node">
								<tui-icon name="people" color="#fff" :size="13"></tui-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="tui-order-title">{{item.status}}</view>
								<view class="tui-order-desc">{{item.context}}</view>
								<view class="tui-order-time tui-gray">{{item.time}}</view>
							</view>
						</template>
					</tui-timeaxis-item>
				</block>
				
			</tui-time-axis>
		</view>
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiTimeAxis from "@/components/thorui/tui-time-axis/tui-time-axis"
	import tuiTimeaxisItem from "@/components/thorui/tui-timeaxis-item/tui-timeaxis-item"
	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiTimeAxis,
			tuiTimeaxisItem
		},
		data() {
			return {
				orderId: 0,
				expressData: [],
				postInfo: [],
			}
		},
		
		methods: {
			
			//得到订单的详情
			getOrderExpressInfo: function() {
				uni.request({
					url: this.$apiUrl + '/api/my-order/express-info',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
            'shopId': uni.getStorageSync('shopId')
					},
					data: { order_id: this.orderId},
					success: (res) => {
						let resData = res.data['data'];
						let resError = res.data['error'];
						if(resError == 0) {
							this.expressData = resData['express_list'];
							this.postInfo = resData['post_info'];
						}else{
							this.tui.toast("数据请求失败~"); return;
						}
					}
				});
			},
			
		},
		//页面加载的时候
		onLoad: function(options) {
			this.orderId = options.order_id || 0;
			this.getOrderExpressInfo();
		},
	}
</script>

<style>
	.tui-order-header {
		padding: 30upx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-text {
		font-size: 28upx;
		color: #333;
		padding: 4upx;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-node {
		background: #ddd;
		height: 44upx;
		width: 44upx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		padding-top: 0;
	}

	.tui-node-small {
		height: 16upx !important;
		width: 16upx !important;
	}

	.tui-bg-primary {
		background: #5677fc !important;
	}

	.tui-order-tracking {
		padding: 30upx 30upx 30upx 40upx;
		background: #fff;
		margin-top: 20upx;
		box-sizing: border-box;
	}

	.tui-order-title {
		color: #333;
		font-weight: bold;
		font-size: 32upx;
		font-family: "microsoft yahei";
	}

	.tui-order-desc {
		font-size: 28upx;
		color: #333;
		padding: 12upx 0;
	}

	.tui-ptop {
		display: flex;
		justify-content: flex-start;
		line-height: 28upx;
	}

	.tui-order-time {
		font-size: 24upx;
		font-weight: bold;
	}

	.tui-gray {
		color: #848484 !important;
	}

	.tui-light-gray {
		color: #888 !important;
	}

	.tui-primary {
		color: #5677fc;
	}
</style>
